stylelint总结

stylelint有一百多条校验规则, 这些规则可以分为三类：用于校对风格的规则、用于判别代码可维护性的规则、以及用于判断代码错误的规则。虽然条数众多，但是不用怕，因为都是默认关闭的，我们可以灵活地进行配置

1、安装

npm install stylelint --save-dev
npm install stylelint-config-standard --save-dev

其中stylelint是运行工具，stylelint-config-standard是推荐的配置，

2、配置文件

创建配置文件有3种方式：
（1）.stylelintrc

{
    "rules": {
        "declaration-block-trailing-semicolon": null
    }
}

(2) stylelint.config.js

module.exports = {
    "rules": {
        "declaration-block-trailing-semicolon": null
    }
}

(3) package.json

{
    ......
    "stylelint": {
        "rules": {
            "color-hex-case": "lower"
        }
    }
}

主要的配置项有extends、rules等
extends
extends用来扩展配置项

{
  "extends": "stylelint-config-standard",
}

rules
rules是一个对象，属性名为规则名称，属性值为规则取值，它告诉stylelint该检查什么，该怎么报错。所有规则默认都是关闭的。
规则的类型不同，取值也不同。规则的取值请戳这里：规则的取值

{
  "rules": {
    "at-rule-blacklist": string|[],
    "at-rule-empty-line-before": "always"|"never",
    "at-rule-name-case": "lower"|"upper",
    "block-no-empty": true
    ...
  }
}

规则的值为null时表示禁用该规则

{
  "rules": {
    "block-no-empty": null
  }
}

rules还可以支持一些自定义配置，给规则传递一个数组即可，数组第一项是规则值，第二项是自定义配置。例如：
（1）指定错误级别：

"indentation": [2, { 
  "severity": "warning" 
}]

（2）自定义错误信息

"color-hex-case": ["lower", {
    "message": "Lowercase letters are easier to distinguish from numbers"
}]

plugins
插件一般是由社区提供的，对stylelint已有规则进行扩展，一般可以支持一些非标准的css语法检查或者其他特殊用途。一个插件会提供一个或者多个检查规则。
plugins声明后还需要在rules中使用它，具体规则名称以及可能的取值需要去查看每个插件的文档。

{
  "plugins": [
    "../some-rule-set.js"
  ],
  "rules": {
    "some-rule-set/first-rule": "everything",
    "some-rule-set/second-rule": "nothing",
    "some-rule-set/third-rule": "everything"
  }
}

3、webpack的使用

webpack需要使用插件stylelint-webpack-plugin
具体用法如下：

var StyleLintPlugin = require('stylelint-webpack-plugin');
 
module.exports = {
  // ... 
  plugins: [
    new StyleLintPlugin(options),
  ],
  // ... 
}

简单配置示例

stylelink.config.js

module.exports = {
    "extends": "stylelint-config-standard",
    "rules": {
        "declaration-block-trailing-semicolon": null
    }
}